{% extends 'muban.html' %}
{% block title %}创建商品{% endblock %}
{% block css %}{% endblock %}
{% block centent %}
<form class="layui-form layui-form-pane" action="">
    {% csrf_token %}
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">请选择商家</label>
            <div class="layui-input-inline">
                <!-- <input lay-verify="" placeholder="关联的商家" type="text" name=""
                    autocomplete="off" class="layui-input"> -->
                <select lay-filter="demo-select-filter" name="brand_id" id="">
                    <option>请选择商店</option>
                    {% for obj in store_all %}
                    <option value="{{ obj.id }}">{{obj.name}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">关联导航</label>
            <div class="layui-input-inline">
                <!-- <input lay-verify="" placeholder="关联的商家" type="text" name=""
                    autocomplete="off" class="layui-input"> -->
                <select name="VendorGoodsNavigator_id" id="VendorGoodsNavigator">
                    <option>请先选择商家</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input placeholder="商品名称" type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-inline">
                <input placeholder="商品价格" type="number" name="price" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label title="商品库存数量" class="layui-form-label">商品库存数量</label>
            <div class="layui-input-inline">
                <input placeholder="商品库存数量" type="number" name="stock" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label title="商品唯一标识码" class="layui-form-label">商品唯一标识码</label>
            <div class="layui-input-inline">
                <input disabled placeholder="商品唯一标识码" value="{{ sku }}" id="sku" type="number" name="sku" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">商品详细描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="请输入商品详细描述" class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{% endblock %}
{% block js %}

<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var layer = layui.layer;


        // 选择框事件
        form.on('select(demo-select-filter)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            let valueAsNumber =  Number(value);
            if (isNaN(valueAsNumber)) {
                yy_layui.layui_msg("选择了错误的选项");
                return
            }
            const Obj = {
                "url": "api/select/store/",
                "method": "POST",
                "params": {"uid": value}
            }
            let response = YYAXIOS(Obj);
            let VendorGoodsNavigator = document.querySelector('#VendorGoodsNavigator');
            response.then(res => {
                VendorGoodsNavigator.innerHTML = res.data.map(item => {
                    return `
                        <option value="${item.id}">${item.name}</option>
                    `;
                }).join('');
                layui.form.render();
                yy_layui.layui_msg("查询成功");
            }).catch(err => {
                yy_layui.layui_alert("获取结果", "获取失败, 详情请打开控制台查询", 2);
            });
        });
        // 提交事件
        form.on('submit(demo2)', function (data) {
            var field = data.field; // 获取表单字段值

            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            // return false
            // 此处可执行 Ajax 等操作
            // …
            const PARAMS = {
                "url": 'store/create/goods/',
                "method": 'POST',
                "params": field
            }
            let response = YYAXIOS(PARAMS);
            response.then(res => {
                yy_layui.layui_msg(yy_yuyan.success.s1);
                let sku = document.querySelector("#sku");
                sku.value = res.data.sku;
                yy_upimg(res,2);
                // layui.jquery(".layui-form")[0].reset();
            }).catch(err => {
                yy_layui.layui_alert("创建失败",err.response.data,2)
            })
            


            
            return false; // 阻止默认 form 跳转
        });
    });
</script>

{% endblock %}